<template>
    <div class="wrapper">
        <input type="number" v-model="count" >
        <p>{{ count }}</p>
        <hr>
        <input type="text" v-model="message" >
        <p>{{ message }}</p>
    </div>
</template>

<script>
import { ref } from 'vue' ;

export default {
    name: 'Counter' ,
    setup(){

        let count = ref( 1001 ); // { value: 1001 }
        console.log( count ); // RefImpl

        let message = ref( 'hello' ); // { value: 'hello' }
        console.log( message ); // RefImpl

        return {
            count,
            message
        }
    }
}
</script>

<style scoped>
.wrapper {
    border: 1px solid green ;
    margin: 15px ;
    padding: 10px ;
}
</style>